<template>
  <div id="page">
    <header>
      <div class="logo">
        <img src="@/assets/IMAGES/kj-logo.png" alt="" />
      </div>
      <!--标题-->
      <div class="screen-title">
        <h3>集团数据监控</h3>
        <p>{{ currentTime }}</p>
      </div>
      <!--菜单-->
      <!-- <div class="menu-list">
        <el-menu
          :default-active="activeIndex"
          background-color="#29243d"
          class="el-menu-demo"
          active-text-color="#fff"
          mode="horizontal"
          @select="handleSelect"
        >
          <el-submenu
            v-for="(item, index) in menu"
            :key="index"
            :index="index + 1"
          >
            <template slot="title">{{ item.title }}</template>
            <block v-for="(ite, inde) in item.submenu" :key="inde">
              <tempalte v-if="ite.itemMenu">
                <el-submenu :index="index + '-' + inde">
                  <template slot="title">{{ ite.title }}</template>
                  <el-menu-item
                    v-for="(it, ind) in ite.itemMenu"
                    :key="ind"
                    :index="index + '-' + inde + '-' + ind"
                    >{{ it.title }}</el-menu-item
                  >
                </el-submenu>
              </tempalte>
              <tempalte v-else>
                <el-menu-item :index="index + '-' + inde">{{
                  ite.title
                }}</el-menu-item>
              </tempalte>
            </block>
          </el-submenu>
        </el-menu>
      </div> -->
    </header>
    <div class="screen-container clearfix">
      <div class="screen-left">
        <div class="header">
          <h3>总体数据</h3>
          <p>Conceptual Data</p>
        </div>
        <div class="data-list">
          <!-- <h6>交易金额:</h6>
          <div class="value">
            <countTo
              :startVal="startVal2"
              :endVal="endVal2"
              separator=","
              :duration="3000"
            ></countTo>
          </div> -->
          <h6>服务人次:</h6>
          <div class="value">
            <countTo
              :startVal="startVal"
              :endVal="digits"
              separator=","
              :duration="3000"
            ></countTo>
          </div>
          <h6>直营机构:</h6>
          <div class="value">
            <countTo
              :startVal="0"
              :endVal="43"
              separator=","
              :duration="3000"
            ></countTo>
          </div>
          <h6>联接医养机构:</h6>
          <div class="value">
            <countTo
              :startVal="0"
              :endVal="4856"
              separator=","
              :duration="3000"
            ></countTo>
          </div>
          <h6>会员数量:</h6>
          <div class="value">
            <countTo
              :startVal="0"
              :endVal="1809542"
              separator=","
              :duration="3000"
            ></countTo>
          </div>
        </div>
        <div class="top5">
          <div class="header">
            <h3>服务人次</h3>
            <p>Min Service Count</p>
          </div>
          <div class="top5-data-list">
            <div id="main"></div>
          </div>
        </div>
        <div class="e-d">
          <div class="header">
            <h3>医疗就诊人次占比</h3>
            <p>Proportion of medical visits</p>
          </div>
          <!-- <div id="edPie"></div> -->
          <div id="incomePie"></div>
        </div>
      </div>
      <div class="screen-center">
        <!--地图-->
        <div id="chart"></div>
        <div class="pie-box">
          <div class="pie-list" v-for="(item, index) in pieData" :key="index">
            <h4>
              {{ item.text }}
              <!-- <i>{{ item.subtext }}</i> -->
            </h4>
            <div :id="'pie' + index"></div>
          </div>
        </div>
      </div>
      <div class="screen-right">
        <!-- <div class="header">
          <h3>电商数据</h3>
          <p>E-commerce data</p>
        </div> -->

        <!-- <div class="progress-bar">
          <div
            class="sku-content"
            v-for="(item, index) in ECommerceData"
            :key="index"
          >
            <div :id="'ECD' + index"></div>
          </div>
        </div> -->
        <!-- <div class="provice-data">
          <div class="header">
            <h3>浙江数据</h3>
            <p>Data of Zhejiang Province</p>
          </div>
          <div id="provicePie"></div>
        </div> -->
        <div class="menu-box clearfix">
          <div
            class="menu-list"
            v-for="(ite, inde) in menu"
            :key="inde"
            @click="selectMenu(ite)"
          >
            <div class="menu-logo">
              <img :src="ite.src" alt="" />
            </div>
            <div class="title">
              <h3>{{ ite.title }}</h3>
            </div>
            <div class="go">
              <img
                class="go-right"
                src="@/assets/IMAGES/icon_right.png"
                alt=""
              />
            </div>
          </div>
        </div>

        <div class="service-data">
          <div class="header">
            <h3>居家服务占比</h3>
            <p>Proportion of home-based services</p>
          </div>
          <div id="servicePie"></div>
        </div>
        <!-- <div class="service-data">
          <div class="header">
            <h3>服务老人占比</h3>
            <p>Proportion of services for the elderly</p>
          </div>
          <div id="elderlyPie"></div>
        </div> -->
        <!-- <div class="service-data">
          <div class="header">
            <h3>全国老人情况分布</h3>
            <p>National distribution of the elderly</p>
          </div>
          <div id="elderly"></div>
        </div> -->
        <div class="other-data">
          <div class="header">
            <h3>老龄文娱数据</h3>
            <p>Data on recreation for the elderly</p>
            <ul class="progress-box">
              <li v-for="(item, index) in otherData" :key="index">
                <div class="name">{{ item.name }}</div>
                <div class="progress">
                  <div
                    class="progress-content"
                    :style="'background:' + item.color"
                  >
                    {{ item.value }}
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import DigitRoll from "@huoyu/vue-digitroll";
import geoJson from "@/assets/REGION/china.json";
import * as echarts from "echarts/core";
import countTo from "vue-count-to";
import "echarts-liquidfill";
import {
  DatasetComponent,
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  VisualMapComponent,
  GeoComponent,
  GridComponent,
  LegendComponent
} from "echarts/components";
import { MapChart, BarChart, PieChart } from "echarts/charts";
import { LabelLayout } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([
  DatasetComponent,
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  VisualMapComponent,
  GeoComponent,
  MapChart,
  GridComponent,
  BarChart,
  LegendComponent,
  CanvasRenderer,
  LabelLayout,
  PieChart
]);
export default {
  name: "screenHome",
  data() {
    return {
      startVal: 124475,
      startVal2: 50345363,
      endVal2: 60345363,
      startVal3: 100138,
      endVal3: 150138,
      digits: 2485675,
      menu: [
        {
          src: require("@/assets/IMAGES/icon_yyl.png"),
          title: "云养老",
          subtitle: "Cloud pension",
          id: 0,
          // url: "https://test.yyanglao.com/jgadmin/login",
          url: "yyy"
        },
        {
          src: require("@/assets/IMAGES/icon_yyy.png"),
          title: "云医院",
          subtitle: "Cloud hospital",
          id: 1,
          url: "https://hospital.yyanglao.com/pc/#/login"
        },
        {
          src: require("@/assets/IMAGES/icon_yyf.png"),
          title: "云药房",
          subtitle: "Cloud pharmacy",
          id: 2,
          url: "yyf"
        }
        // {
        //   src: require("@/assets/IMAGES/icon_gyl.png"),
        //   title: "电商",
        //   subtitle: "Supply chain services",
        //   id: 3,
        //   submenu: [
        //     {
        //       src: require("@/assets/IMAGES/icon_ygyl.png"),
        //       title: "云供应链系统",
        //       subtitle: "Cloud supply chain system",
        //       url: "",
        //     },
        //   ],
        // },
      ],
      activeIndex: 1,
      imgSrc: require("@/assets/IMAGES/icon_map.png"),
      currentTime: this.$base.timeSwitch(new Date(), true),
      ECommerceData: [
        {
          name: "SKU数量",
          value: 50138,
          number: 50138
        },
        {
          name: "交易次数",
          value: 150138,
          number: 150138
        }
      ],
      otherData: [
        {
          name: "会员数量",
          value: "1000875",
          color: "#00DCB9"
        },
        {
          name: "主播人数",
          value: "213",
          color: "#ee6666"
        },
        {
          name: "社群数量",
          value: "4816",
          color: "#fac858"
        }
      ],
      pieData: [
        {
          text: "看护类型占比",
          subtext: "Proportion of care types",
          color: "#00D1FF",
          data: [
            { value: 12, name: "自理" },
            { value: 42, name: "半失能" },
            { value: 13, name: "认知症障碍" },
            { value: 32, name: "失能" }
          ]
        },
        {
          text: "慢病服务种类占比",
          subtext: "Proportion of chronic disease service types",
          color: "#00DCB9",
          data: [
            { value: 15.68, name: "心脑血管用药" },
            { value: 14.52, name: "消化系统用药" },
            { value: 10.49, name: "感冒清热解毒" },
            { value: 7.41, name: "风湿骨科用药" },
            { value: 6.93, name: "眼科用药" },
            { value: 6.27, name: "皮肤用药" },
            { value: 6.07, name: "糖尿病" },
            { value: 4.08, name: "耳鼻喉口腔" },
            { value: 22.09, name: "其它" }
          ]
        },
        {
          text: "收入占比",
          subtext: "Income accounted for",
          color: "#FFB85D",
          data: [
            { value: 2.57, name: "数字康养云" },
            { value: 24.96, name: "云药房" },
            { value: 19.52, name: "供应链" },
            { value: 28.6, name: "自营医养服务" },
            { value: 24.35, name: "机构托管" }
          ]
        }
      ],
      top5Data: [
        {
          title: "内科",
          total: 52200
        },
        {
          title: "骨科",
          total: 50000
        },
        {
          title: "外科",
          total: 45200
        },
        {
          title: "中医科",
          total: 32200
        },
        {
          title: "儿科",
          total: 25200
        }
      ],
      yData: [
        {
          name: "内科",
          value: "0",
          textStyle: {
            color: "#fff",
            fontSize: 9
          }
        },
        {
          name: "骨科",
          value: "1",
          textStyle: {
            color: "#fff",
            fontSize: 9
          }
        },
        {
          name: "外科",
          value: "2",
          textStyle: {
            color: "#fff",
            fontSize: 9
          }
        },
        {
          name: "中医科",
          value: "3",
          textStyle: {
            color: "#fff",
            fontSize: 9
          }
        },
        {
          name: "儿科",
          value: "4",
          textStyle: {
            color: "#fff",
            fontSize: 9
          }
        }
      ]
    };
  },
  methods: {
    // restart() {
    //   const random = `${Math.random()}`.substr(2).substr(0, 4);
    //   setTimeout(() => {
    //     this.digits = this.digits + random;
    //     this.changeDigit();
    //   }, 2000);
    // },
    // flipStra3(before, next) {
    //   if (next <= before) {
    //     return true;
    //   }
    //   return false;
    // },
    // changeDigit() {
    //   this.$refs.digitroll.setDigit([
    //     {
    //       value: 2,
    //       dur: 600,
    //     },
    //     {
    //       value: 4,
    //       dur: 900,
    //     },
    //     {
    //       value: 6,
    //       dur: 1200,
    //     },
    //     {
    //       value: 8,
    //       dur: 1500,
    //     },
    //   ]);
    // },
    selectMenu(e) {
      let url = e.url;
      //云药房
      if (url == "yyf") {
        this.getToken();
      } else if (url == "yyy") {
        //养老大屏
        /*window.open(
          `http://www.gold-key.com.cn:82/csadmin/#/avoidLogin?username=changshan1&password=123456`
        );*/
        window.open(
          `http://test.yyanglao.com/csadmin/#/avoidLogin?username=changshan1&password=123456`
        );
      }
      //外链
      else if (url.includes("http")) {
        let token = JSON.parse(sessionStorage.getItem("loginInfo")).token;
        //location.href = url + `?token=${token}`;
        window.open(url + `?token=${token}`);
      }
    },
    handleSelect(key) {
      let arr = key.split("-");
      if (arr.length == 2) {
        let url = this.menu[parseInt(arr[0])].submenu[parseInt(arr[1])].url;
        this.jumpPage(url);
      } else {
        let url = this.menu[parseInt(arr[0])].submenu[parseInt(arr[1])]
          .itemMenu[parseInt(arr[2])].url;
        this.jumpPage(url);
      }
    },
    jumpPage(url) {
      if (url) {
        //云药房
        if (url == "yyf") {
          this.getToken();
        }
        //外链
        else if (url.includes("http")) {
          //let token = JSON.parse(sessionStorage.getItem("loginInfo")).token;
          //location.href = url + `?token=${token}`;
          let token = "";
          window.open(url + `?token=${token}`);
          //内部跳转
        } else {
          this.$router.push(url);
        }
      } else {
        this.$confirm("功能待开发，敬请期待！", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          showCancelButton: false
        });
      }
    },
    /***云药房获取token**/
    async getToken() {
      let res = await this.$base.axiosPost(
        "https://yydsdev.yiy-tech.cn/server/user/login",
        {
          username: "demo",
          encPassword:
            "$2a$04$eJyhA799Usp63.f4XjAmoOVWrQ9iIw4hqZih1FCz4bw8JeV82/a/i",
          logintype: "backend"
        }
      );
      window.open(
        "https://yydsdev.yiy-tech.cn/manage/#/login?token=" + res.data.token,
        "_blank"
      );
    },
    //地图
    drawMap() {
      var chartDom = document.getElementById("chart");
      var myChart = echarts.init(chartDom);
      myChart.resize();
      var option;
      echarts.registerMap("china", geoJson);
      myChart.setOption(
        (option = {
          // tooltip: {
          //   trigger: "item",
          //   triggerOn: "mousemove|click",
          //   backgroundColor: "#211C35",
          //   borderWidth: 0,
          //   textStyle: {
          //     color: "#fff",
          //     fontSize: 14,
          //   },
          //   extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);",
          //   formatter: (e) => {
          //     if (e.data.list) {
          //       let itemArray = e.data.list;
          //       let valueStr = "";
          //       if (itemArray) {
          //         for (let index = 0; index < itemArray.length; index++) {
          //           valueStr =
          //             valueStr +
          //             itemArray[index].split(":")[0] +
          //             "<p style='font-weight:bold;font-size:16px'>" +
          //             itemArray[index].split(":")[1] +
          //             "</p>";
          //         }
          //       }

          //       return (
          //         "<div style='display: flex'><div style='flex: 1;width:30px;height:30px;margin-right:10px;'><img src=" +
          //         this.imgSrc +
          //         " /></div><div style='flex: 1;'>" +
          //         e.name +
          //         "<br />" +
          //         valueStr +
          //         "</div></div>"
          //       );
          //     } else {
          //       return;
          //     }
          //   },
          // },
          visualMap: {
            type: "piecewise", // 类型为分段型
            min: 0,
            max: 10,
            show: false,
            inRange: {
              color: ["#29243D", "#00D1FF"]
            }
          },
          //通过series 中的data更新数据
          series: [
            {
              name: "中国地图",
              type: "map",
              map: "china",
              label: {
                show: true,
                color: "#fff",
                formatter: e => {
                  if (e.value == 10) {
                    return e.name;
                  } else {
                    return "";
                  }
                }
              },
              left: "center",
              // 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域
              // layoutSize: 100
              zoom: 1.2,
              itemStyle: {
                areaColor: "#29243D"
              },
              //高亮状态
              emphasis: {
                label: {
                  show: true,
                  color: "#fff",
                  formatter: e => {
                    return e.name;
                  }
                },
                itemStyle: {
                  areaColor: "#00D1FF",
                  shadowColor: "#00D1FF",
                  shadowBlur: 5
                }
              },
              //选中
              select: {
                label: {
                  show: true,
                  color: "#fff",
                  formatter: e => {
                    return e.name;
                  }
                },
                itemStyle: {
                  areaColor: "#00D1FF",
                  shadowColor: "#00D1FF",
                  shadowBlur: 5
                }
              },
              data: [
                {
                  name: "新疆",
                  value: 0,
                  list: ["养老院机构: 0", "医疗机构: 0", "药店:0", "供应商:0"]
                },
                {
                  name: "西藏",
                  value: 0,
                  list: ["养老院机构: 0", "医疗机构: 0", "药店:0", "供应商:0"]
                },
                {
                  name: "内蒙古",
                  value: 0,
                  list: ["养老院机构: 0", "医疗机构: 0", "药店:0", "供应商:0"]
                },
                {
                  name: "青海",
                  value: 0,
                  list: ["养老院机构: 0", "医疗机构: 0", "药店:0", "供应商:0"]
                },
                {
                  name: "四川",
                  value: 10,
                  list: ["养老院机构: 0", "医疗机构: 0", "药店:0", "供应商:0"]
                },
                {
                  name: "黑龙江",
                  value: 0,
                  list: ["养老院机构: 0", "医疗机构: 0", "药店:0", "供应商:0"]
                },
                {
                  name: "甘肃",
                  value: 0,
                  list: ["养老院机构: 0", "医疗机构: 0", "药店:0", "供应商:0"]
                },
                {
                  name: "云南",
                  value: 10,
                  list: ["养老院机构: 0", "医疗机构: 0", "药店:0", "供应商:0"]
                },
                {
                  name: "广西",
                  value: 10,
                  list: ["养老院机构: 0", "医疗机构: 0", "药店:0", "供应商:0"]
                },
                {
                  name: "湖南",
                  value: 0,
                  list: ["养老院机构: 0", "医疗机构: 0", "药店:0", "供应商:0"]
                },
                {
                  name: "陕西",
                  value: 10,
                  list: ["养老院机构: 12", "医疗机构: 2", "药店:2", "供应商:5"]
                },
                {
                  name: "广东",
                  value: 0,
                  list: ["养老院机构: 0", "医疗机构: 0", "药店:0", "供应商:0"]
                },
                {
                  name: "吉林",
                  value: 0,
                  list: ["养老院机构: 0", "医疗机构: 0", "药店:0", "供应商:0"]
                },
                {
                  name: "河北",
                  value: 10,
                  list: ["养老院机构: 0", "医疗机构: 0", "药店:0", "供应商:0"]
                },
                {
                  name: "湖北",
                  value: 0,
                  list: ["养老院机构: 0", "医疗机构: 0", "药店:0", "供应商:0"]
                },
                {
                  name: "贵州",
                  value: 10,
                  list: ["养老院机构: 0", "医疗机构: 0", "药店:0", "供应商:0"]
                },
                {
                  name: "山东",
                  value: 10,
                  list: ["养老院机构: 0", "医疗机构: 0", "药店:0", "供应商:0"]
                },
                {
                  name: "江西",
                  value: 0,
                  list: ["养老院机构: 0", "医疗机构: 0", "药店:0", "供应商:0"]
                },
                {
                  name: "河南",
                  value: 10,
                  list: ["养老院机构: 0", "医疗机构: 0", "药店:0", "供应商:0"]
                },
                {
                  name: "辽宁",
                  value: 10,
                  list: ["养老院机构: 0", "医疗机构: 0", "药店:0", "供应商:0"]
                },
                {
                  name: "山西",
                  value: 10,
                  list: ["养老院机构: 0", "医疗机构: 0", "药店:0", "供应商:0"]
                },
                {
                  name: "安徽",
                  value: 0,
                  list: ["养老院机构: 0", "医疗机构: 0", "药店:0", "供应商:0"]
                },
                {
                  name: "福建",
                  value: 10,
                  list: ["养老院机构: 0", "医疗机构: 0", "药店:0", "供应商:0"]
                },
                {
                  name: "浙江",
                  value: 10,
                  list: ["养老院机构: 12", "医疗机构: 2", "药店:2", "供应商:5"]
                },
                {
                  name: "江苏",
                  value: 0,
                  list: ["养老院机构: 0", "医疗机构: 0", "药店:0", "供应商:0"]
                },
                {
                  name: "重庆",
                  value: 0,
                  list: ["养老院机构: 0", "医疗机构: 0", "药店:0", "供应商:0"]
                },
                {
                  name: "宁夏",
                  value: 10,
                  list: ["养老院机构: 0", "医疗机构: 1", "药店:0", "供应商:0"]
                },
                {
                  name: "海南",
                  value: 0,
                  list: ["养老院机构: 0", "医疗机构: 0", "药店:0", "供应商:0"]
                },
                {
                  name: "台湾",
                  value: 0,
                  list: ["养老院机构: 0", "医疗机构: 0", "药店:0", "供应商:0"]
                },
                {
                  name: "北京",
                  value: 10,
                  list: ["养老院机构: 0", "医疗机构: 0", "药店:0", "供应商:0"]
                },
                {
                  name: "天津",
                  value: 0,
                  list: ["养老院机构: 0", "医疗机构: 0", "药店:0", "供应商:0"]
                },
                {
                  name: "上海",
                  value: 10,
                  list: ["养老院机构: 0", "医疗机构: 0", "药店:0", "供应商:0"]
                },
                {
                  name: "香港",
                  value: 0,
                  list: ["养老院机构: 0", "医疗机构: 0", "药店:0", "供应商:0"]
                },
                {
                  name: "澳门",
                  value: 0,
                  list: ["养老院机构: 0", "医疗机构: 0", "药店:0", "供应商:0"]
                }
              ]
            }
          ]
        })
      );
      // myChart.on("click", () => {
      //   this.provinceData = [
      //     {
      //       data: [
      //         {
      //           value: Math.floor(Math.random() * 100 + 10),
      //           name: "养老机构",
      //         },
      //         { value: Math.floor(Math.random() * 200 + 10), name: "养老人数" },
      //         {
      //           value: Math.floor(Math.random() * 1000 + 10),
      //           name: "养老缴费",
      //         },
      //       ],
      //     },
      //     {
      //       data: [
      //         {
      //           value: Math.floor(Math.random() * 100 + 10),
      //           name: "医疗机构",
      //         },
      //         { value: Math.floor(Math.random() * 200 + 10), name: "就诊人数" },
      //         { value: Math.floor(Math.random() * 300 + 10), name: "医生人数" },
      //         { value: Math.floor(Math.random() * 400 + 10), name: "医疗收入" },
      //       ],
      //     },
      //     {
      //       data: [
      //         {
      //           value: Math.floor(Math.random() * 100 + 10),
      //           name: "药店总数",
      //         },
      //         { value: Math.floor(Math.random() * 200 + 10), name: "购买人数" },
      //         { value: Math.floor(Math.random() * 200 + 10), name: "药品品种" },
      //         { value: Math.floor(Math.random() * 400 + 10), name: "销售收入" },
      //       ],
      //     },
      //     {
      //       data: [
      //         {
      //           value: Math.floor(Math.random() * 100 + 10),
      //           name: "供应商",
      //         },
      //         { value: Math.floor(Math.random() * 200 + 10), name: "交易金额" },
      //       ],
      //     },
      //   ];

      //   for (let index = 0; index < this.provinceData.length; index++) {
      //     let value = "province-info" + index;
      //     this.drawProvincePie(value, this.provinceData[index]);
      //   }
      // });
      option && myChart.setOption(option);
    },
    //设备数据
    drawEquipmentData() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("edPie"));

      // 指定图表的配置项和数据
      var percent = 70; //获取100以内的随机模拟数据
      var maxVal = 100; //圆环极大值

      let val = this.$base.accDiv(percent, maxVal);
      let text = this.$base.accMul(val, 100);

      var option = {
        title: {
          text: `${text}%`, //圆环中间显示的数值单位
          x: "center",
          y: "center",
          textStyle: {
            color: "#00DCB9",
            fontSize: 21
          }
        },
        series: [
          {
            name: "设备数据",
            type: "pie", //饼图类型
            radius: ["50%", "80%"], //饼图的内、外半径
            hoverAnimation: true,
            label: {
              color: "#fff",
              fontSize: 12,
              formatter: e => {
                return e.data.name + "\n" + e.data.num;
              }
            },
            //圆环其他色
            itemStyle: {
              normal: {
                color: "#313131"
              }
            },
            data: [
              {
                //系列中的数据内容数组
                value: percent,
                name: "使用数量",
                num: percent,
                //主色
                itemStyle: {
                  normal: {
                    color: "#9236E9"
                  }
                }
              },
              {
                value: maxVal - percent,
                name: "设备数量",
                num: maxVal
              }
            ],
            animationEasingUpdate: "cubicInOut",
            animationDurationUpdate: 1000
          }
        ]
      };
      myChart.setOption(option, true); // 使用配置项和数据显示图表
    },
    //电商数据
    drawECommerceData(dom, data) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById(dom));

      // 指定图表的配置项和数据
      var percent = 70; //获取100以内的随机模拟数据
      var maxVal = 100; //圆环极大值

      let val = this.$base.accDiv(percent, maxVal);
      let text = this.$base.accMul(val, 100);

      var option = {
        title: {
          text: `${text}%`, //圆环中间显示的数值单位
          x: "center",
          y: "center",
          textStyle: {
            color: "#fff",
            fontSize: 12
          }
        },
        series: [
          {
            name: "电商数据",
            type: "pie", //饼图类型
            radius: ["70%", "90%"], //饼图的内、外半径
            hoverAnimation: false,
            //圆环其他色
            itemStyle: {
              normal: {
                color: "#313131"
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {
                //系列中的数据内容数组
                value: percent,
                num: percent,
                //主色
                itemStyle: {
                  normal: {
                    color: "#9236E9"
                  }
                }
              },
              {
                value: maxVal - percent,
                num: maxVal
              }
            ],
            animationEasingUpdate: "cubicInOut",
            animationDurationUpdate: 1000
          }
        ]
      };
      myChart.setOption(option, true); // 使用配置项和数据显示图表
    },
    //份数据
    drawProvincePie() {
      var chartDom = document.getElementById("provicePie");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {},
        color: ["#FFB85D", "#00DCB9", "#9236E9", "#00D1FF"],
        series: [
          {
            type: "pie",
            radius: "50%",
            label: {
              color: "#fff",
              fontSize: 12,
              formatter: "{b}\n{c}"
            },
            data: [
              { value: 1048, name: "养老院机构" },
              { value: 735, name: "供应商" },
              { value: 580, name: "药店数量" },
              { value: 484, name: "医疗机构" }
            ],
            itemStyle: {
              normal: {
                borderWidth: 1, // 间距的宽度
                borderColor: "#29243D" //背景色
              }
            }
          }
        ]
      };

      option && myChart.setOption(option);
    },
    //医疗就诊人次占比
    drawIncomePie() {
      var chartDom = document.getElementById("incomePie");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          formatter: "{b}<br/>{c}%"
        },
        // color: ["#FFB85D", "#00DCB9", "#9236E9", "#00D1FF"],
        series: [
          {
            type: "pie",
            radius: "50%",
            label: {
              color: "#fff",
              fontSize: 12,
              formatter: "{b}\n{c}%"
            },
            data: [
              { value: 21.89, name: "名医馆中医科" },
              { value: 32.53, name: "老年康复科" },
              { value: 17.29, name: "儿科" },
              { value: 28.29, name: "全科及其它" }
            ]
          }
        ]
      };

      option && myChart.setOption(option);
    },

    //服务数据占比
    drawServiceData() {
      var chartDom = document.getElementById("servicePie");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          formatter: "{b}\n{d}%"
        },
        series: [
          {
            type: "pie",
            radius: "50%",
            label: {
              color: "#fff",
              fontSize: 12,
              formatter: "{b}\n{d}%"
            },
            data: [
              { value: 76800, name: "助餐" },
              { value: 3900, name: "助行" },
              { value: 2350, name: "助浴" },
              { value: 5800, name: "生活照料" },
              { value: 6720, name: "助洁" },
              { value: 580, name: "辅具租赁" },
              { value: 8900, name: "助医" },
              { value: 9980, name: "助聊" },
              { value: 1180, name: "紧急救助" }
            ]
          }
        ]
      };
      myChart.on("click", e => {
        //养老大屏
        // window.open(
        //   `http://www.gold-key.com.cn:82/csadmin/#/avoidLogin?username=changshan1&password=123456`
        // );
        window.open(
          `http://test.yyanglao.com/csadmin/#/avoidLogin?username=changshan1&password=123456`
        );
      });
      option && myChart.setOption(option);
    },
    //服务老人占比
    drawelderlyPie() {
      var chartDom = document.getElementById("elderlyPie");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          formatter: "{b}\n{c}%"
        },
        color: ["#FFB85D", "#00DCB9", "#9236E9"],
        series: [
          {
            type: "pie",
            radius: "50%",
            label: {
              color: "#fff",
              fontSize: 12,
              formatter: "{b}\n{c}%"
            },
            data: [
              { value: 54, name: "居家养老" },
              { value: 36, name: "机构养老" },
              { value: 10, name: "社区养老" }
            ]
          }
        ]
      };
      option && myChart.setOption(option);
    },
    //老人情况分布
    drawElderlyBar() {
      var chartDom = document.getElementById("elderly");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          formatter: "{b}<br/>{c}万人"
        },
        grid: {
          x: 50,
          y: 30,
          x2: 5,
          y2: 20
        },
        xAxis: {
          type: "category",
          axisLabel: { interval: 0, rotate: 10 },
          data: [
            {
              value: "60~69",
              textStyle: {
                fontSize: 10
              }
            },
            {
              value: "70~79",
              textStyle: {
                fontSize: 10
              }
            },
            {
              value: "80~89",
              textStyle: {
                fontSize: 10
              }
            },
            {
              value: "90~99",
              textStyle: {
                fontSize: 10
              }
            },
            {
              value: "100以上",
              textStyle: {
                fontSize: 10
              }
            }
          ]
        },
        yAxis: {
          type: "value",
          name: "人数(万)",
          nameTextStyle: {
            fontSize: 8
          },
          splitLine: {
            show: false
          }
        },
        series: [
          {
            data: [10010, 5600, 1850, 180, 3.5],
            type: "bar",
            barWidth: 30,
            label: {
              show: true,
              position: "top",
              color: "#fff",
              fontWeight: "bold",
              formatter: e => {
                let newValue = this.$base.accDiv(e.data, 17643.5);
                return Math.ceil(newValue * 100) + "%";
              },
              valueAnimation: true
            },
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)"
            }
          }
        ]
      };

      option && myChart.setOption(option);
    },
    //饼状图统计
    drawPie(val, info) {
      var chartDom = document.getElementById(val);
      var myChart = echarts.init(chartDom);
      myChart.resize();
      var option;

      option = {
        tooltip: {
          trigger: "item",
          formatter: "{b}\n{c}%"
        },
        color: info.color,
        top: 0,
        visualMap: {
          show: false,
          min: 0,
          max: 60,
          inRange: {
            colorLightness: [0, 1]
          }
        },
        series: [
          {
            type: "pie",
            radius: "55%",
            // radius: ['40%', '70%'],
            roseType: "radius",
            data: info.data.sort(function(a, b) {
              return a.value - b.value;
            }),
            label: {
              color: "#eee",
              fontSize: 10,
              formatter: "{b}\n{c}%"
            },
            itemStyle: {
              shadowBlur: 200,
              shadowColor: "rgba(0, 0, 0, 0.1)"
            },
            animationType: "scale",
            animationEasing: "elasticOut",
            animationDelay: function(idx) {
              return Math.random() * 200;
            }
          }
        ]
      };
      // myChart.on("click", (e) => {
      //   this.$router.push({
      //     path: "/tradeStatistics",
      //     query: {
      //       title: "交易金额",
      //     },
      //   });
      // });
      option && myChart.setOption(option);
    },
    //横向柱状图带图片
    drawBar(yData) {
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;

      const weatherIcons = {
        one: require("@/assets/IMAGES/icon_top1.png"),
        two: require("@/assets/IMAGES/icon_top2.png"),
        three: require("@/assets/IMAGES/icon_top3.png")
      };
      const seriesLabel = {
        show: true
      };
      option = {
        tooltip: {
          formatter: e => {
            let index = Number(e.name) + 1;
            return this.yData[e.name].name + "<br/>" + e.value + "人";
          }
        },
        // grid: {
        //   height: "100%",
        //   width: "85%",
        //   top: "0",
        //   left: "18%",
        // },
        grid: {
          x: 63,
          y: 5,
          x2: 0,
          y2: 0
        },
        xAxis: {
          type: "value",
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: "category",
          inverse: true,
          data: yData,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            // margin: 4,
            // width: 60,
            // overflow: "truncate",
            // ellipsis: "...",
            formatter: (value, index) => {
              return "{" + value + "| } {value|" + yData[index].name + "}";
            },
            rich: {
              value: {
                lineHeight: 30,
                align: "center"
              },
              0: {
                height: 14,
                width: 18,
                backgroundColor: {
                  image: weatherIcons.one
                }
              },
              1: {
                height: 14,
                width: 18,
                backgroundColor: {
                  image: weatherIcons.two
                }
              },
              2: {
                height: 14,
                width: 18,
                backgroundColor: {
                  image: weatherIcons.three
                }
              }
            }
          }
        },
        series: [
          {
            name: "就诊人数",
            type: "bar",
            label: {
              show: true,
              color: "#fff",
              fontWeight: "bold",
              position: "insideRight",
              valueAnimation: true
            },
            itemStyle: {
              barBorderRadius: [12, 12, 12, 12],
              color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                { offset: 0, color: "transparent" },
                { offset: 1, color: "#FFB85D" }
              ])
            },
            data: [90500, 80500, 70500, 60500, 56200]
          }
        ]
      };

      option && myChart.setOption(option);
    },
    //服务人次
    drawMinServiceCount() {
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        color: ["#73c0de"],
        tooltip: {
          formatter: "{b}月\n{c}万"
        },
        grid: {
          x: 28,
          y: 40,
          y2: 40
        },
        xAxis: {
          type: "category",
          data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"]
        },
        yAxis: {
          type: "value",
          name: "(万)",
          nameTextStyle: {
            fontSize: 8
          }
        },
        series: [
          {
            data: [20, 12, 25, 26, 27, 18, 23, 23, 25, 26, 25, 3],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)"
            }
          }
        ]
      };

      option && myChart.setOption(option);
    }
  },
  filters: {
    numberFilter(e) {
      if (e > 10000) {
        return e / 10000;
      } else if (e > 100000000) {
        return e / 100000000;
      } else {
        return e;
      }
    },
    signFilter(e) {
      if (e > 10000) {
        return "万";
      } else if (e > 100000000) {
        return "亿";
      } else {
        return;
      }
    }
  },
  components: { DigitRoll, countTo },
  created() {
    if (sessionStorage.getItem("digits")) {
      if (sessionStorage.getItem("digits") <= 10000000) {
        this.digits = parseInt(sessionStorage.getItem("digits"));
      } else {
        this.digits = 2485675;
      }
    }
    // if (sessionStorage.getItem("endVal2")) {
    //   if (sessionStorage.getItem("endVal2") <= 1000000000) {
    //     this.endVal2 = sessionStorage.getItem("endVal2");
    //   } else {
    //     this.endVal2 = 72458569;
    //   }
    // }
    // if (sessionStorage.getItem("endVal3")) {
    //   if (sessionStorage.getItem("endVal3") <= 250138) {
    //     this.endVal3 = sessionStorage.getItem("endVal3");
    //   } else {
    //     this.endVal3 = 150138;
    //   }
    // }
    setInterval(() => {
      this.currentTime = this.$base.timeSwitch(new Date(), true);
    }, 1000);
  },
  mounted() {
    this.$nextTick(() => {
      this.drawMap();
      this.drawMinServiceCount();
      //this.drawEquipmentData();
      //this.drawBar(this.yData);
      // for (let index = 0; index < this.ECommerceData.length; index++) {
      //   let dom = `ECD${index}`;
      //   this.drawECommerceData(dom, this.ECommerceData[index]);
      // }
      // this.drawProvincePie();
      //this.drawelderlyPie();
      this.drawIncomePie();
      this.drawServiceData();
      for (let index = 0; index < this.pieData.length; index++) {
        let value = "pie" + index;
        this.drawPie(value, this.pieData[index]);
      }
      //this.drawElderlyBar();
    });
    window.onresize = () => {
      this.drawMap();
      this.drawMinServiceCount();
      //this.drawEquipmentData();
      // this.drawBar(this.yData);
      // for (let index = 0; index < this.ECommerceData.length; index++) {
      //   let dom = `ECD${index}`;
      //   this.drawECommerceData(dom, this.ECommerceData[index]);
      // }
      //this.drawProvincePie();
      this.drawIncomePie();
      this.drawServiceData();
      //this.drawelderlyPie();
      for (let index = 0; index < this.pieData.length; index++) {
        let value = "pie" + index;
        this.drawPie(value, this.pieData[index]);
      }
      // this.drawElderlyBar();
    };
    setInterval(() => {
      this.startVal = this.digits;
      this.startVal2 = this.endVal2;
      // this.startVal3 = this.endVal3;
      if (this.digits >= 10000000) {
        this.startVal = 0;
        this.digits = 2485675;
      } else {
        this.digits = parseInt(
          this.$base.accAdd(this.digits, parseInt(Math.random() * 10 + 1))
        );
      }
      // if (this.endVal2 >= 1000000000) {
      //   this.startVal2 = 50345363;
      //   this.endVal2 = 72458569;
      // } else {
      //   this.endVal2 = parseInt(
      //     this.$base.accAdd(this.endVal2, parseInt(Math.random() * 1000 + 100))
      //   );
      // }
      //this.endVal3 = parseInt(this.endVal3 + parseInt(Math.random() * 5));
      //sessionStorage.setItem("endVal2", this.endVal2);
      //sessionStorage.setItem("endVal3", this.endVal3);
      sessionStorage.setItem("digits", this.digits);
    }, 30000);
  }
};
</script>
<style lang="scss" scoped>
#page {
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  background-color: #18142c;
}
.screen-container {
  height: calc(100vh - 10%);
  padding: 0 35px;
  box-sizing: border-box;
}
header {
  position: relative;
  height: 10%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #29243d;
  .logo {
    padding: 0 35px;
  }
  .screen-title {
    color: #ffffff;
    margin-right: 35px;
    h3 {
      font-size: 28px;
      font-weight: 600;
      margin-bottom: 4px;
    }
    p {
      font-size: 16px;
      font-family: ArialMT;
      letter-spacing: 1px;
    }
  }
  // .menu-list {
  //   position: absolute;
  //   right: 35px;
  // }
}
.screen-left {
  float: left;
  width: 20%;
  padding-top: 35px;
  height: 100%;
  .data-list {
    padding: 8px 0;
    h6 {
      font-size: 14px;
      font-weight: 400;
      color: #bdbdbd;
      margin-bottom: 8px;
    }
    .value {
      font-size: 30px;
      font-family: Arial-BoldMT, Arial;
      font-weight: normal;
      color: #ffffff;
      margin-bottom: 8px;
    }
    .value:last-child {
      margin-bottom: 0;
    }
  }
  .top5 {
    margin-top: 9px;
    width: 346px;
    height: 25%;
    padding: 17px;
    background: #29243d;
    border-radius: 17px;
    .top5-data-list {
      height: 100%;
    }
  }
  .e-d {
    margin-top: 17px;
    width: 346px;
    height: 22%;
    padding: 17px;
    background: #29243d;
    border-radius: 17px;
    #edPie,
    #incomePie {
      height: 90%;
      width: 100%;
      margin: 0 auto;
    }
  }
}
.screen-center {
  float: left;
  width: 60%;
  height: 100%;
  #chart {
    height: 70%;
    width: 100%;
  }
  .pie-box {
    display: flex;
    align-items: center;
    // height: 160px;
    height: 28%;
    width: 100%;
    box-sizing: border-box;
    h4 {
      font-size: 18px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      i {
        margin-left: 5px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        color: #bdbdbd;
      }
    }

    .pie-list {
      height: 100%;
      width: 30%;
      margin-left: 30px;
    }
  }
  #pie0,
  #pie1,
  #pie2 {
    height: 100%;
    width: 100%;
  }
}
.screen-right {
  float: left;
  width: 20%;
  height: 100%;
  padding-top: 35px;
  .sub-title {
    margin: 17px 0 7px;
    h4 {
      display: inline-block;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 19px;
    }
    p {
      display: inline-block;
      font-size: 12px;
      font-family: ArialMT;
      color: #ffffff;
      line-height: 10px;
    }
  }
  h1 {
    width: 193px;
    height: 31px;
    font-size: 28px;
    font-family: Arial-BoldMT, Arial;
    font-weight: normal;
    color: #ffffff;
    line-height: 32px;
  }
  .progress-bar {
    display: flex;
    align-items: center;
    margin: 20px 0 35px;
    .sku-content {
      display: flex;
      align-items: center;
      margin-right: 35px;
      #ECD0,
      #ECD1 {
        height: 50px;
        width: 50px;
        margin-right: 7px;
      }
    }

    .describe {
      h5 {
        font-size: 21px;
        font-family: Arial-BoldMT, Arial;
        font-weight: normal;
        color: #ffffff;
        line-height: 24px;
      }
      p {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 15px;
      }
    }
  }
  .provice-data,
  .service-data {
    width: 346px;
    height: 35%;
    padding: 17px;
    background: #29243d;
    border-radius: 17px;
    margin-bottom: 17px;
    #provicePie,
    #servicePie,
    #elderlyPie {
      height: 100%;
    }
    #elderly {
      height: 80%;
    }
  }
  .other-data {
    width: 346px;
    background: #29243d;
    border-radius: 17px;
    padding: 17px;
    margin-bottom: 17px;
    .progress-box {
      margin-top: 17px;
      li {
        display: flex;
        align-items: center;
        margin-bottom: 17px;
        .name {
          width: 80px;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ffffff;
          margin-right: 3px;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
        .progress {
          position: relative;
          flex: 1;
          height: 30px;
          background: #313131;
          border-radius: 12px;
          .progress-content {
            position: absolute;
            top: 0;
            left: 0;
            width: 80%;
            text-align: center;
            color: #fff;
            font-size: 14px;
            height: 30px;
            border-radius: 20px;
            font-family: Arial-BoldMT, Arial;
            font-weight: bold;
            line-height: 30px;
          }
        }
      }
    }
    .info {
      color: #ccc;
      font-size: 12px;
      padding: 5px 0;
    }
  }
  .other-data:last-child {
    margin-bottom: 0;
  }
}
.header {
  h3 {
    display: inline-block;
    font-size: 18px;
    font-weight: 400;
    color: #ffffff;
  }
  p {
    display: inline-block;
    margin-left: 5px;
    font-size: 12px;
    color: #bdbdbd;
  }
}
#main {
  height: 100%;
  width: 100%;
}
.el-menu-demo {
  border: none !important;
}
.menu-box {
  margin-bottom: 20%;
  height: 18%;
}
.menu-list {
  float: left;
  // width: 170px;
  width: 32.5%;
  height: 120%;
  box-sizing: border-box;
  cursor: pointer;
  padding: 17px;
  display: flex;
  flex-direction: column;
  // align-items: center;
  // justify-content: space-around;
  background: #29243d;
  border-radius: 17px;
  .menu-logo {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin: 0 auto;
    box-sizing: border-box;
  }
  .title {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    h3 {
      height: 30px;
      font-size: 14px;
      font-weight: 500;
      color: #eee;
      line-height: 30px;
    }
  }
  .go {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    .go-right {
      height: 12px;
      width: 12px;
      padding: 8px;
      background-color: #313131;
      border-radius: 50%;
    }
  }
}
.menu-list:nth-child(1),
.menu-list:nth-child(2) {
  margin-right: 1.25%;
}
</style>